{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}个人博客{% endblock %}</title>
    <link rel="icon" type="image/svg+xml" href="{% static 'svg/博客.svg' %}">
    <!-- Bootstrap CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Font Awesome -->
    {#    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">#}
    <link rel="stylesheet" href="{% static 'css/all.min.css' %}">
    <!-- Highlight.js -->
    {#    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">#}
    <link rel="stylesheet" href="{% static 'css/github.min.css' %}">
    <!-- Custom CSS -->
    <style>
        body {
            padding-top: 56px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .content {
            flex: 1;
        }

        .navbar-brand {
            font-weight: bold;
        }

        .card-img-top {
            height: 200px;
            object-fit: cover;
        }

        .featured-img {
            height: 300px;
            object-fit: cover;
        }

        .post-content img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }

        .comment-section {
            margin-top: 30px;
        }

        .comment {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 5px;
            background-color: #f8f9fa;
        }

        .reply {
            margin-left: 40px;
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            background-color: #e9ecef;
        }

        .modal-img {
            max-width: 100%;
            max-height: 80vh;
        }

        footer {
            margin-top: auto;
            padding: 20px 0;
            background-color: #f8f9fa;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="{% url 'home' %}">个人博客</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'home' %}">首页</a>
                </li>
                {% if user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'post_create' %}">写文章</a>
                    </li>
                {% endif %}
            </ul>
            <form class="d-flex me-2" action="{% url 'search' %}" method="get">
                <input class="form-control me-2" type="search" placeholder="搜索文章..." name="q" aria-label="Search">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav">
                {% if user.is_authenticated %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-bs-toggle="dropdown" aria-expanded="false">
                            {{ user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="{% url 'profile' %}">个人资料</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="{% url 'manage_taxonomies' %}">分类与标签</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="{% url 'account_logout' %}">退出登录</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'account_login' %}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'account_signup' %}">注册</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<!-- 消息提示 -->
{% if messages %}
    <div class="container mt-3">
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    </div>
{% endif %}

<!-- 主要内容 -->
<div class="content py-4">
    {% block content %}{% endblock %}
</div>

<!-- 页脚 -->
<footer class="bg-dark text-white py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h5>关于博客</h5>
                <p>这是一个使用 Django 构建的个人博客网站，提供文章发布、评论等功能。</p>
            </div>
            <div class="col-md-3">
                <h5>链接</h5>
                <ul class="list-unstyled">
                    <li><a href="{% url 'home' %}" class="text-white">首页</a></li>
                    {% if user.is_authenticated %}
                        <li><a href="{% url 'profile' %}" class="text-white">个人资料</a></li>
                    {% else %}
                        <li><a href="{% url 'account_login' %}" class="text-white">登录</a></li>
                        <li><a href="{% url 'account_signup' %}" class="text-white">注册</a></li>
                    {% endif %}
                </ul>
            </div>
            <div class="col-md-3">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li><i class="fas fa-envelope me-2"></i> 18152007693@163.com</li>
                    <li><i class="fas fa-phone me-2"></i>13480895055</li>
                </ul>
            </div>
        </div>
        <hr class="my-4">
        <div class="text-center">
            <p>&copy; {% now "Y" %} 个人博客. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- 图片查看模态框 -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">图片查看</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img src="{% static 'svg/task.svg' %}" class="modal-img" id="modalImage" alt="Full size image">
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
{#    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>#}
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<!-- jQuery -->
{#    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>#}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!-- Highlight.js -->
<script src="{% static 'js/highlight.min.js' %}"></script>
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>#}
<!-- 自定义 JS -->
<script>
    // 代码高亮
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre code').forEach((el) => {
            hljs.highlightElement(el);
        });
    });

    // 图片点击放大
    $(document).ready(function () {
        $('.post-content img').click(function () {
            var imgSrc = $(this).attr('src');
            $('#modalImage').attr('src', imgSrc);
            $('#imageModal').modal('show');
        });
    });
</script>
{% block extra_js %}{% endblock %}
</body>
</html>

